<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06个人简历练习</title>
</head>
<body>
<table border="1px">
    <caption>个人简介</caption>
    <tr><td>照片:</td><td id="pic_td"></td></tr>
    <tr><td>姓名:</td><td id="name_td"></td></tr>
    <tr><td>年龄:</td><td id="age_td"></td></tr>
    <tr><td>好友:</td><td id="friends_td"></td></tr>
</table>
<script>
    let person = {
        name:'传奇哥',
        age:18,
        friends:['路飞','索隆','娜美','张飞'],
        imgUrl:'img/fcq.jpg'
    };
    //1.获取页面中的4个单元格
    let picTd = document.getElementById('pic_td');
    let nameTd = document.getElementById('name_td');
    let ageTd = document.getElementById('age_td');
    let friendsTd = document.getElementById('friends_td');
    //2.将对象数据中的姓名与年龄取出，装入对应的td中
    nameTd.innerHTML = person.name;
    ageTd.innerHTML = person.age;
    //3.页面没有图片元素，需要创建并设置图片的路径 宽度
    let imgE = document.createElement('img');
    imgE.src = person.imgUrl;
    imgE.width = 100;
    //注意:还需要将图片元素装入到td单元格中
    picTd.append(imgE);
    //4.页面中没有无序列表元素，需要创建
    let ul = document.createElement('ul');
    for(let fName of person.friends){
        //每循环到一个名字，就需要创建一个li
        let li = document.createElement('li');
        //把当前循环到名字装入新创建的li中
        li.innerHTML = fName;
        //把本轮循环准备好的li装入ul中
        ul.append(li);
    }
    //循环结束，将准备好的ul装入单元格中
    friendsTd.append(ul);
</script>
</body>
</html>